<template>
<section class="eventList">
   <div class="leftEvent">
      <div class="title titleA">新增应急事件</div>
      <div class="newEventList">
        <div class="bg">
            <div class="waterfall">
            <EventCard v-for="item in newEvents" :key="item.index" :index="newEvents.indexOf(item)" :requestId="item.requestId"
                 :eventType="item.tag" :phone="item.requestPhone" :position="item.requestAddress" :describe="item.requestDescription"
                 @changeVisible="changeVisible" @changePosition="changePosition"></EventCard>
            </div>
        </div>
      </div>
   </div>
   <div class="rightEvent">
     <div class="hisEventTable">
        <div class="title titleA">已审核应急事件</div>
        <div class="hisEventList">
            <div class="bg">
                <!-- <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div> -->
                <EventTable :eventData="newEvents"></EventTable>
            </div>
        </div>
     </div>
     <div class="hisEventChart" >

        <div class="barChart" id="requestBarChart"></div>
        <div class="pieChart" id="requestPieChart"></div>
        
     </div>
   </div>

   <TaskDialog  :dialogVisible="dialogVisible" :dialogPosition="dialogPosition"
                :allTask="allTask" @changeVisible="changeVisible" @deleteEvent="deleteEvent"
                 :requestId="selectRequestId" :requestDescription="selectRequestDescription"></TaskDialog>
</section>
</template>
<script>
import { getRequest } from "../utils/api";
import { putRequest } from "../utils/api";
import "../css/EventList.css"
import EventCard from "@/components/EventCard.vue"
import EventTable from "@/components/EventTable.vue"
import TaskDialog from "@/components/TaskDialog.vue"
import * as echarts from 'echarts';
import axios from 'axios'


export default {
    data() {
        return {
            dialogPosition:null,
            dialogVisible:false,
            newEvents:[],
            allTask:[],
            selectEvent:-1, //当前选择事件的index
            selectRequestDescription:"", //当前选择事件的描述
            selectRequestId:-1,
            requestBarChart:null,
            requestPieChart:null,
            barChartData:[5, 20, 36, 10, 10],
            pieChartData:[0,0,0],
            chartFlag:false,  //第一次是否画完图表
            dataFlag:false,
            ax:1,   //axios的index
            fixedTypeConfig:{
              1:{
                type:"flood",
                tag:"洪水",
                events:[]
              },
              2:{
                type:"fire",
                tag:"火灾",
                events:[]
              },
              3:{
                type:"outdoor",
                tag:"户外",
                events:[]
              },
              4:{
                type:"earthquake",
                tag:"地震",
                events:[]
              },
              5:{
                type:"other",
                tag:"其他",
                events:[]
              }
            }
            
        };
    },
    activated:function(){
      console.log("事件的keep调用");
      if(!this.chartFlag&&this.dataFlag){
        this.drawBarChart()
        this.getRequestNum()
      }
    },
    mounted: function () {
        window.addEventListener("resize", () => {
        	  this.requestPieChart.resize();
            this.requestBarChart.resize();
        });
        this.throughAllEvents()


        //请求字段：requestId，requestPhone，requestAddress，requestDescription，
        //requestNumber,requestTime,taskId,latitude,longitude
        // axios.get('/getRequests/unchecked?type='+this.fixedTypeConfig[1].type,).then(res=>{
        //     // console.log(this.newEvents);
        //   this.fixedTypeConfig[1].events= res.data[0];
        //   this.fixedTypeConfig[1].events.forEach(element => {
        //     this.$set(element, "tag", this.fixedTypeConfig[1].tag);
        //   });
        //   this.newEvents=this.fixedTypeConfig[1].events
        //   console.log(this.newEvents)
        // }).catch(err=>{
        //   console.log(err)
        // })
    },
    methods: {
        throughAllEvents(){
            axios.get('/getRequests/unchecked?type='+this.fixedTypeConfig[this.ax].type,).then(res=>{
            // console.log(this.newEvents);
              // console.log(this.ax);
              this.fixedTypeConfig[this.ax].events= res.data[0];
              // console.log(this.fixedTypeConfig[this.ax].events);
              if(this.fixedTypeConfig[this.ax].events.length!=0){
                this.fixedTypeConfig[this.ax].events.forEach(element => {
                  this.$set(element, "tag", this.fixedTypeConfig[this.ax].tag);
                  this.$set(element, "type", this.fixedTypeConfig[this.ax].type);
                });
              }
              if(this.ax==1){
                this.newEvents=this.fixedTypeConfig[this.ax].events.reverse()
                // console.log(this.newEvents)
              }
              if(this.ax==5){
                console.log("请求完成");
                this.dataFlag=true
                this.drawBarChart()
                this.getRequestNum()
                return
              }
              this.ax++
              this.throughAllEvents()
            }).catch(err=>{
              console.log(err)
            })
        },
        getRequestNum(){
          this.pieChartData=[0,0,0]
          axios.get('/getUnCheckRequestNums').then(res=>{
                for(var i in res.data){
                  this.pieChartData[0]+= res.data[i]
                }
                axios.get('/getRequestingNums').then(res=>{
                       for(var i in res.data){
                        this.pieChartData[1]+= res.data[i]
                       }
                      //  this.drawChart()
                       axios.get('/getCompletedRequestNums').then(res=>{
                          for(var i in res.data){
                           this.pieChartData[2]+= res.data[i]
                          }
                          this.drawChart()
                          }).catch(err=>{
                            console.log(err)
                       })
                    }).catch(err=>{
                      console.log(err)
                    })
                }).catch(err=>{
                  console.log(err)
             })
        },
        deleteEvent(){
            this.newEvents.splice(this.selectEvent,1);
            // this.newEvents.forEach(element => {
            //     element.index=this.newEvents.indexOf(element);
            // }); 
        },
        changePosition(index){
            this.dialogPosition=[this.newEvents[index].longitude,this.newEvents[index].latitude];
            this.selectEvent=index;
            this.selectRequestId=this.newEvents[index].requestId
            this.selectRequestDescription=this.newEvents[index].requestDescription
            console.log(this.newEvents[index].type);
            console.log(this.selectEvent);
            //获取与这个事件有关的任务
            axios.get('/getRequest/getTasks?type='+this.newEvents[index].type+'&requestId='+this.newEvents[index].requestId).then(res=>{
            this.allTask = res.data;
            console.log(this.allTask);
            this.changeVisible(true)
            }).catch(err=>{
             console.log(err)
            })

        },
        changeVisible(value){
            this.dialogVisible=value;
        },

        drawBarChart(){
          this.barChartData=[]
           for(var i in this.fixedTypeConfig){
              this.barChartData.push(this.fixedTypeConfig[i].events.length)
           }
          //  console.log(this.barChartData);
           
           this.requestBarChart= echarts.init(document.getElementById('requestBarChart'));
            // 绘制图表
           this.requestBarChart.setOption({
             title: {
               text: '应急请求类别分布图'
             },
            //  color:['#8bb4db'],
             tooltip: {},
             xAxis: {
               data: ['洪水', '火灾', '户外', '地震', '其他'],
             },
             yAxis: {},
             series: [
               {
                 name: '详情',
                 type: 'bar',
                 data: this.barChartData,
                 barWidth: '60%',
                 colorBy: 'data',
                 label: {show: true,position: 'top',},
               }
             ]
           });

           this.requestBarChart.on('click', (params)=>{
            for(var i in this.fixedTypeConfig){
              if(params.name==this.fixedTypeConfig[i].tag){
                this.newEvents=this.fixedTypeConfig[i].events
                return;
              }
            }
            //  if(params.name=="洪水"){
            //    this.newEvents=this.fixedTypeConfig[1].events
            //  }else[
            //    this.newEvents=[]
            //  ]
           });
        },
        drawChart(){
   
           this.requestPieChart= echarts.init(document.getElementById('requestPieChart'));
               // 绘制图表
           this.requestPieChart.setOption({
               title: {
                  text: '请求分布图',
                  subtext: '',
                  
                },
                tooltip: {
                  trigger: 'item',
                  formatter: '{b} : {c}个 ({d}%)'
                },
               color:['#99CCCC','#0099CC','#FF9999'],
               series: [
                 {
                    type: 'pie',
                    radius: '40%',
                    center: ['50%', '50%'],
                   data: [
                     {
                       value: this.pieChartData[0],
                       name: '未审核'
                     },
                     {
                       value: this.pieChartData[1],
                       name: '已审核'
                     },
                     {
                       value: this.pieChartData[2],
                       name: '已结束'
                     }
                   ],
                 }
               ]})
               this.chartFlag=true
           } 
    },    
    components: { EventCard:EventCard,EventTable:EventTable,TaskDialog:TaskDialog}
};
</script>



// newEvents:[{index:0,status:1,eventType:"洪水",jingwei:[114.25,30.53],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsna"},
//            {index:1,status:1,eventType:"地震",jingwei:[114.24,30.54],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaa"},
//            {index:2,status:1,eventType:"户外",jingwei:[114.23,30.55],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa"},
//            {index:3,status:1,eventType:"其他",jingwei:[114.22,30.56],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa"},
//            {index:4,status:1,eventType:"火灾",jingwei:[114.21,30.57],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马我是最长的了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"},
//            {index:5,status:1,eventType:"洪水",jingwei:[114.20,30.58],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马"},
//            {index:6,status:1,eventType:"洪水",jingwei:[114.20,30.59],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马"}],